<template>
  <div id=''>
    <ul class="top-nav">
      <li>
        <router-link exact to="/" tag="a">首页</router-link>
      </li>
      <li>
        <router-link to="/topic" tag="a">榜单</router-link>
      </li>
      <li>
        <router-link to="/mine" tag="a">我的</router-link>
      </li>
      <li>
        <router-link to="/search" tag="a">搜索</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='less'>
.top-nav {
  display: flex;
  background: #fff;

  li {
    flex: 1;
    text-align: center;
    height: 8vw;
    line-height: calc(8vw - 2px);
    font-size: 3.5vw;

    a {
      display: block;
    }

    .active {
      color: #ff0000;
      border-bottom: 2px solid #ff0000;
    }
  }
}
</style>
